<div class="" ng-init="$ctrl.init()">
    <div class="mb-3">
        {{$ctrl.header}}
        <!-- <a class="btn btn-link text-primary btn-sm float-end py-0" data-bs-toggle="modal"
            data-bs-target="#modal-files-search-{{$ctrl.id}}">
            <i class="fa fa-folder-open"></i> Browse
        </a>
        <a class="btn btn-link text-primary btn-sm float-end py-0"
            ng-click="$ctrl.isShowBrowser = !$ctrl.isShowBrowser"><i class="fa fa-file-upload"></i> Upload</a> -->
    </div>
    <div class="mb-3">
        <div class="input-group">
            <div class="custom-file">
                <input id="{{$ctrl.id}}" type="file" name="pic" accept="{{$ctrl.uploadOptions.accepts}}"
                    ngf-select="$ctrl.selectFile($files)" data-files="file.files"
                    class="position-absolute hidden form-control">
                <label class="form-label" for="{{$ctrl.id}}">Upload file...</label>
            </div>
        </div>
    </div>
    <div
    class=" custom-image"
        style="background:url(/mix-app/assets/img/image_placeholder.jpg) no-repeat center;  cursor:pointer; min-height: 200px;">
        <img ng-if="$ctrl.isImage" imageonload ng-src="{{$ctrl.srcUrl}}" ng-if="$ctrl.srcUrl" name="pic"
            class="custom-file-img d-block ng-scope ml-auto mr-auto w-100" accept="{{$ctrl.acceptTypes}}">
        <a ng-if="!$ctrl.isImage && $ctrl.srcUrl !== '/'" href="{{$ctrl.srcUrl}}" target="_blank">View</a>
        <input type="hidden" value="{{$ctrl.type}}/{{$ctrl.folder}}" class="folder-val">
        <div class="input-group mb-3">
            <span class="input-group-text">URL</span>
            <input id="img-url-{{$ctrl.id}}" type="text" onclick="this.select()" ng-model="$ctrl.srcUrl"
                class="form-control" placeholder="https://your-image-url...">
            <button class="btn btn-outline-secondary btn-clipboard" type="button"
                data-clipboard-target="#img-url-{{$ctrl.id}}"><i class="mi mi-Copy"></i></button>
        </div>
        <h3 class="text-primary" ng-if="$ctrl.progress">Loaded {{$ctrl.progress}}%</h3>
    </div>
</div>

<div class="modal modal-default fade show" id="modal-files-search-{{$ctrl.id}}" ng-init="getListMedias()">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="mi mi-Media"></i> Medias Manager</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                </button>
            </div>
            <!-- <div class="modal-body" style="height: calc(100vh - 143px);overflow-y: auto;"> -->
            <div class="modal-body">
                <!-- <media-navs prefix="$ctrl.id" data="$ctrl.mediaNavs" is-single="'true'" output="$ctrl.srcUrl">
                </media-navs> -->
            </div>
            <div class="modal-footer" ng-show="data.totalItems > 0">
                <paging class="small col-md-12" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                    scroll-top="true">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>